<script lang="ts" setup>
import { ref } from 'vue'
import OrderList from './components/OrderList.vue'
import type { MedicalOrderStatusType } from '@/types/order'
// 定义选中的值和类型
const active = ref<MedicalOrderStatusType>('waitpayment')
</script>

<template>
  <div class="order-page">
    <cp-nav-bar title="药品订单"/>
    <van-tabs sticky shrink v-model:active="active">
      <van-tab title="待付款" name="waitpayment">
        <OrderList type="waitpayment" />
      </van-tab>
      <van-tab title="待发货" name="waitsend">
        <OrderList type="waitsend" />
      </van-tab>
      <van-tab title="待收货" name="waitdelivery">
        <OrderList type="waitdelivery" />
      </van-tab>
      <van-tab title="已取消" name="cancel">
        <OrderList type="cancel" />
      </van-tab>
      <van-tab title="已完成" name="finish">
        <OrderList type="finish" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
.order-page {
  padding-top: var(--van-nav-bar-height);
}
</style>